<template>
  <div id="pixi" class="pixi"></div>
</template>

<script setup>
import { defineProps, defineExpose, defineEmits } from 'vue'
import { hooks } from './hooks'

const props = defineProps({
  // 机器人位置
  position: {
    type: Array,
    default: () => {
      ;[0, 0]
    },
  },

  // 总线路
  line: {
    type: Array,
    default: () => {
      ;[]
    },
  },

  // 已经过线路
  afterLine: {
    type: Array,
    default: () => {
      ;[]
    },
  },

  // 是否开启键盘控制
  openKeyBoard: {
    type: Boolean,
    default: true,
  },

  // 是否开启精灵拖拽
  isDrag: {
    type: Boolean,
    default: true,
  },

  // 是否开启画布拖拽，精灵拖拽和画布拖拽不可同时开启
  isDragFrame: {
    type: Boolean,
    default: false,
  },

  // 是否开启画布缩放
  isFrameZoome: {
    type: Boolean,
    default: false,
  },
})

// 组件事件列表
const emit = defineEmits([
  'spilt-click',
  'spilt-drag',
  'left',
  'up',
  'right',
  'down',
])

const { app } = hooks(props, emit)

defineExpose({
  app,
})
</script>
